<template>
  <rx-dialog @handOk="onOk" @cancel="cancel">
    <a-form :label-col="{ span: 10 }" :wrapper-col="{ span: 8 }">
      <a-form-item :label="i18n('list.mobileShow','手机显示')" style="margin-bottom: 0px;margin-top: 20px">
        <a-select :placeholder="mobileShowModeExt.label" style="width: 120px" @change="handleChange">
          <a-select-option class="reslidt" :value="list.value" v-for="(list,index) in mobileShowModeTypes" :key="index">
            {{list.label}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="i18n('list.displayTitle','不显示标题')">
        <a-checkbox :checked="display" @change="onChange">
        </a-checkbox>
      </a-form-item>
    </a-form>
  </rx-dialog>
</template>

<script>
  import {
    RxDialog,
    Util
  } from "@lowcode/jpaas-common-lib";
  export default {
    name: "RenderConfig",
    components: {
      RxDialog
    },
    props: ["tablelist", "curFields", "layerid", "destroy"],
    data() {
      return {
        currentView: '',
        mobileShowModeTypes: [{
            value: '',
            label: '',
           
          },
          {
            value: 'host',
            label: this.i18n('form.host','主显示')
          },
          {
            value: 'unhost',
            label: this.i18n('form.unhost','副显示')
          }
        ],
        mobileShowModeExt:{},
        mobileShowMode_name:'',
        mobileShowMode:'',
        display:false
      }
    },
    computed: {},
    created() {

    },
    mounted() {
      this.setData();
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"RenderConfig",key);
      },
      onChange(value) {
        this.display = value.target.checked
        console.log(value.target.checked)
      },
      handleChange(e) {
        if(e==""){
          this.mobileShowModeExt ={};
          this.mobileShowMode_name ="";
        } else if(e=="host"){
          this.$set(this.mobileShowModeExt,'key','host');
          this.$set(this.mobileShowModeExt,'label',this.i18n('form.host','主显示'));
          this.mobileShowMode_name=this.i18n('form.host','主显示');
        } else if(e=="unhost"){
          this.$set(this.mobileShowModeExt,'key','unhost');
          this.$set(this.mobileShowModeExt,'label',this.i18n('form.unhost','副显示'));
          this.mobileShowMode_name=this.i18n('form.unhost','副显示');
        }
        this.mobileShowMode = e
      },
      onOk() {
        Util.closeWindow(this, "ok");
      },
      cancel() {
        Util.closeWindow(this, "cancel");
      },
      setData() {
        var renderConf = this.tablelist;
        if(renderConf[0].mobileShowModeExt !=''){
           this.mobileShowModeExt = renderConf[0].mobileShowModeExt 
        }
        if(renderConf[0].display){
          this.display = renderConf[0].display
        }
        // if (!renderConf) renderConf = "{}";
        // renderConf = JSON.parse(renderConf);
        // renderConf.field = this.render.field;
        // this.current.setData(renderConf, this.curFields);
      },
    }
  }
</script>

<style>
  .reslidt {
    height: 30px;
    line-height: 30px;
  }
</style>
